<!--
	课程通知管理
-->
<template>
<div class="notice-box">
<div class="notice-content">
	<!-- 顶部按钮 start -->
	<div class="top-box">
		<el-button type="primary"
				   @click="dialogFormVisible=true;
				   editNotice={t:'发布通知',courseId:teacherInfoData.thisEditCourse.id}">发布</el-button>
		<div width="120px"><el-input clearable v-model="search" placeholder="搜索标题或内容" /></div>
	</div>
	<!-- 顶部按钮 end -->
	<!-- 数据表格 start -->
	<el-table
		ref="multipleTable"
		:data="tableData.filter((data) =>!search
		|| data.title.toLowerCase().includes(search.toLowerCase())
		|| data.content.toLowerCase().includes(search.toLowerCase()))"
		style="width: 100%"
		:border="true"
	>
		<el-table-column type="selection" width="55" />
		<!-- 排序加列上加 sortable -->
		<el-table-column property="title" label="通知标题" />
		<el-table-column property="content" label="通知内容" />
		<el-table-column label="通知班级" >
			<template #default="scope">
				{{ getClassName(scope.row.classId) }}
			</template>
		</el-table-column>
		<el-table-column property="createTime" label="发布时间" sortable />
		<el-table-column label="操作" width="160px">
			<template #default="scope">
				<el-button size="mini" type="primary"
						   @click="openEditNoticeDialog(scope.$index, scope.row)">修改</el-button>
				<el-button size="mini" type="danger"
						   @click="handleDelete(scope.row.id)">删除</el-button>
			</template>
		</el-table-column>
	</el-table>
	<!-- 数据表格 end -->
	<!-- 底部按钮 start -->
	<div style="margin-top: 20px">
		批量操作
		<el-button type="primary" @click="toggleSelection([tableData[1], tableData[2]])">修改</el-button>
		<el-button type="danger" @click="toggleSelection()">删除</el-button>
	</div>
	<!-- 底部按钮 end -->
</div>
</div>

<!-- 修改 新增的对话框 start -->
<el-dialog v-model="dialogFormVisible" :title="editNotice.t">
	<el-form :model="editNotice">
		<el-form-item label="通知标题">
			<el-input placeholder="请输入标题" v-model="editNotice.title"></el-input>
		</el-form-item>
		<el-form-item label="通知内容">
			<el-input :rows="2" type="textarea" placeholder="输入通知内容"
				v-model="editNotice.content"></el-input>
		</el-form-item>
		<el-form-item label="通知班级">
			<el-select v-model="editNotice.classId" placeholder="选择班级">
				<el-option v-for="item in this.classList.filter(item=>{
				let tag=false;
				this.teacherInfoData.thisEditCourse.classRelationshipList.forEach(cItem=>{
					if (cItem.classId==item.id){
						tag=true;
					}
				});
				return tag;
			})" :label="item.name" :value="item.id"></el-option>
			</el-select>
		</el-form-item>
	</el-form>
	<template #footer>
	  <span class="dialog-footer">
		<el-button @click="closeDialog">取消</el-button>
		<el-button type="primary" @click="addOrChangeNotice">确定</el-button>
	  </span>
	</template>
</el-dialog>
<!-- 修改 新增的对话框 end -->
</template>

<script>
import axios from "@/plugins/axios";
import ipconfig from "@/utils/ipconfig";
import {ElMessage,ElMessageBox} from "element-plus"

export default {
	name: "Notice",
	data(){
		return {
			tableData:[],
			/**
			 * 教师登录数据
			 */
			teacherInfoData:this.$store.state.teacherInfoData,
			/*
			* 控制对话框显示
			* */
			dialogFormVisible:false,
			/*
			* 当前编辑的对象
			* */
			editCourse:{},
			// 班级列表
			classList:[],
			/**
			 * 搜索的内容
			 */
			search:"",
			/*
			* 当前编辑的通知
			* */
			editNotice:{},
		}
	},
	methods:{
		// 深拷贝
		deepCopy(obj) {
			let result = Array.isArray(obj) ? [] : {};
			for (let key in obj) {
				if (typeof obj[key] === 'object' && obj[key] !== null) {
					result[key] = this.deepCopy(obj[key]); //递归复制
				} else {
					result[key] = obj[key];
				}
			}
			return result;
		},
		/**
		 * 获取班级名称
		 * @param classId
		 * @returns {string}
		 */
		getClassName(classId){
			let name="";
			this.classList.forEach(item=>{
				if (item.id==classId){
					name=item.name;
				}
			});
			return name;
		},
		/**
		 * 关闭对话框
		 */
		closeDialog(){
			// 1.清空当前编辑的对象数据
			this.editCourse={};
			// 2.关闭显示
			this.dialogFormVisible=false;
		},
		/**
		 * 打开编辑框
		 * @param index
		 * @param value
		 */
		openEditNoticeDialog(index, value){
			this.editNotice=this.deepCopy(value);
			this.editNotice.t="修改通知";
			this.dialogFormVisible=true;
		},
		/**
		 * 增加和修改通知
		 */
		addOrChangeNotice(){
			console.log(this.editNotice);
			axios.post(ipconfig.address+"/notice/addOrUpdateNotice",{
				...this.editNotice
			}).then((response)=>{
				if(response.data.code==200){
					location.reload();
				}else{
				    ElMessage.warning(response.data.message);
				}
			}).catch((error)=>{
				console.log(error);
			});
		},
		handleDelete(noticeId){
			ElMessageBox.confirm(
				'确定要删除该通知吗？'+noticeId,
				'你确定？',
				{
					confirmButtonText: '删除',
					cancelButtonText: '取消',
					type:"warning"
				}
			).then(()=>{
				axios.delete(ipconfig.address+"/notice/deleteNotice/"+noticeId).then((response)=>{
					if(response.data.code==200){
						ElMessage.success(response.data.message);
						location.reload();
					}else{
					    ElMessage.warning(response.data.message);
					}
				}).catch((error)=>{

				});
			});
		}
	},
	mounted() {
		// 这里获取班级列表
		axios.get(ipconfig.address+"/common/dictionary?decription=班级").then((response)=>{
			if(response.data.code==200){
				this.classList=response.data.data;
			}else{
				ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
			console.log(error);
		});

		axios.get(ipconfig.address
			+"/notice/noticeList/?courseId="+this.teacherInfoData.thisEditCourse.id).then((response)=>{
			if(response.data.code==200){
				this.tableData=response.data.data;
			}else{
			    ElMessage.warning(response.data.message);
			}
		}).catch((error)=>{
		    console.log(error);
		});
	}
}
</script>

<style lang="scss" scoped>
.notice-box{
	width: 100%;
	background: #ffffff;

	.notice-content{
		padding: 20px;
		.top-box{
			margin-top: 20px;margin-bottom: 20px;
			display: flex;

			div{
				margin-left: 10px;
			}
		}
	}

}
</style>